﻿var readyToUpdate = 0;
var prm = null;

function resetDisplayImg(displayDiv, modifyDiv) {
    readyToUpdate = 0;
    $('.loading').hide();
    modifyDiv.hide();
    displayDiv.css({
        "border":"none",
        "background-color": "#FFFFFF",
        "opacity": "1.0"
    });
}

/**
 *   Cancelling the updating interface by switching off the details-tomodify panel
*/
function cancelFunction(cancelDiv) {
    var displayDiv = cancelDiv.parent().parent();
    if (!displayDiv.hasClass('img_display')) {
        displayDiv = displayDiv.parent();
        if (!displayDiv.hasClass('img_display')) {
            displayDiv = displayDiv.parent();
        }
    }
    resetDisplayImg(displayDiv, cancelDiv.parent());
}

function pageInit(sender, args) {
    var panelToBeRefreshed;
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }

    if (args._updatePanelsToUpdate != null) {
        if (args._updatePanelsToUpdate.length == 1) {
            panelToBeRefreshed = args._updatePanelsToUpdate[0];
        }
        for (var i = 0; i < sender._updatePanelIDs.length; i++) {
            if (sender._updatePanelIDs[i] != panelToBeRefreshed) {
                //sender._updatePanelIDs[i]._onUpdating.quit();  
            }
        }
    }
}

/**
 * 
*/
function pageLoaded(sender, args) {
    var panelToBeRefreshed;
}


function findPanel(id, panels) {
    if (panels == null || panels.length < 1) {
        return null;
    }
    for (var i = 0; i < panels.length; i++) {
        var el = panels[i];
        if (el.id == id) {
            return el;
        }
    }
    return null;
}

$(function () {
    $(document).ready(function () {
        prm = Sys.WebForms.PageRequestManager.getInstance();
        // Hook up Page Event Handler - called when panels are created/updated
        /*   prm.add_pageLoaded(pageLoaded);
        prm.add_beginRequest(pageInit);
        */
        /**
        * A handler is added to the Cancel button because it is placed inside the UpdatePanel because it replaces the contents of the panel on an update.
        * It means that all event subscribed before the update are no longer subscribed after the update. We should just re-subscribe them
        */

        prm.add_endRequest(function () {
            $('.img-details-cancel').click(function () {
                cancelFunction($(this));
            });
        });

    });

    // Click on edit icon, all details are editable
    $('.img_details > img').click(function () {
        readyToUpdate = 1;
        var divDetails = $(this).parent();
        var divDisplay = divDetails.parent();
        divDisplay.children('.img_details').hide();
        var updatePanel = divDisplay.children('div');
        if (updatePanel.children('.img_details_modify').length == 0) {
            updatePanel = updatePanel.children('div');
        }
        updatePanel.children('.img_details_modify').show();
        divDisplay.css({
            "border": "1px solid #DBDB98",
            "border-bottom": "none",
            "background-color": "#F1F59F",
            "opacity": "0.7"
        });
        divDisplay.children('.img_container').css('opacity', '1.0');
    });

    // Canel button
    $('.img-details-cancel').click(function () {
        cancelFunction($(this));
    });

    // Mouse over on the Picture container, picture ditails are displayed
    $('.img_display').mouseover(function () {
        if (readyToUpdate == 0) {
            //$(this).children('.img_container').css('border-bottom-color', '#EBEBEB');
            //$(this).children('.img_container').css('border-bottom-style', 'none');
            $(this).children('.img_details').css({
                "opacity": "0.5"
            });
            $(this).children('.img_details').show();
        }
    });

    $('.img_display').mouseout(function () {
        if (readyToUpdate == 0) {
            var displayDiv = $(this).parent();
            //$(this).children('.img_container').css('border-bottom-color', '#9D9DA2');
            //$(this).children('.img_container').css('border-bottom-style', 'solid');
            $(this).children('.img_details').hide();
        }
    });

    // Mouse over on the Picture details, the edit button is displayed
    $('.img_details').mouseover(function () {
        if (readyToUpdate == 0) {
            $('.img_details > img').show();
        }
    });

    // Mouse out from the Picture container
    $('.img_details').mouseout(function () {
        if (readyToUpdate == 0) {
            $('.img_details > img').hide();
        }
    });
});
